<template>
  <div class="current-temp-display">
    <div class="temp-value-large">{{ currentTemp.toFixed(1) }}°C</div>
    <div class="temp-label-large">当前温度</div>
    <div class="status-badge" :class="'badge-' + status">
      {{ statusText }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { RoomStatus } from '../../types/index';

const props = defineProps<{
  currentTemp: number;
  status: RoomStatus;
  statusText: string;
}>();
</script>

<style scoped>
.current-temp-display {
  text-align: center;
  padding: 40px 30px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 16px;
  border: 2px solid #e0f2fe;
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.08);
}

.temp-value-large {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
  color: #067ef5;
  letter-spacing: -2px;
}

.temp-label-large {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 12px;
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.badge-serving {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.badge-waiting {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.badge-standby {
  background: #eff6ff;
  color: #3b82f6;
  border: 1px solid #bfdbfe;
}

.badge-target_reached {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

@media (max-width: 768px) {
  .temp-value-large {
    font-size: 60px;
  }
}
</style>

